<template>
  <div class="progress-container">
    <h3>审批进度</h3>
    <div class="steps-wrapper">
      <!-- 灰色底线和高亮线，宽度100%，穿过所有圆的中点 -->
      <div class="steps-base-line"></div>
      <div class="steps-active-line" :style="{ width: activeLineWidth + '%' }"></div>
      <div class="steps">
        <div
          v-for="(step, index) in allSteps"
          :key="step.name"
          :class="getStepClass(index)"
          :style="{ left: (index / (allSteps.length - 1)) * 100 + '%' }"
        >
          <div class="node-icon">{{ index + 1 }}</div>
          <div class="node-name">{{ step.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { ApplicationStatus } from '@/services/models'

interface Props {
  status: ApplicationStatus
}
const props = defineProps<Props>()

const allSteps = [
  {
    name: '提交申请',
    status: [
      'PENDING_HEAD_REVIEW',
      'PENDING_FINANCE_REVIEW',
      'PENDING_GM_REVIEW',
      'COMPLETED',
      'REJECTED',
    ],
  },
  { name: '部门主管审批', status: ['PENDING_FINANCE_REVIEW', 'PENDING_GM_REVIEW', 'COMPLETED'] },
  { name: '财务审核', status: ['PENDING_GM_REVIEW', 'COMPLETED'] },
  { name: '总经理终审', status: ['COMPLETED'] },
  { name: '完成', status: ['COMPLETED'] },
]

const currentStepIndex = computed(() => {
  if (props.status === 'COMPLETED') return 4
  if (props.status === 'PENDING_GM_REVIEW') return 3
  if (props.status === 'PENDING_FINANCE_REVIEW') return 2
  if (props.status === 'PENDING_HEAD_REVIEW') return 1
  if (props.status === 'REJECTED') {
    // Find which step it was rejected at, for now simple logic
    return 1
  }
  return 0
})

// 计算高亮线宽度（百分比）
const activeLineWidth = computed(() => {
  // 只高亮已完成的节点之间的线
  return (currentStepIndex.value / (allSteps.length - 1)) * 100
})

const getStepClass = (index: number) => {
  if (props.status === 'REJECTED' && index === currentStepIndex.value) {
    return 'step rejected'
  }
  if (index < currentStepIndex.value) {
    return 'step completed'
  }
  if (index === currentStepIndex.value) {
    return 'step active'
  }
  return 'step'
}
</script>

<style scoped>
.progress-container {
  margin-bottom: 32px;
}
.steps-wrapper {
  position: relative;
  height: 80px;
  margin: 0 0 24px 0;
}
/* 灰色底线和高亮线，宽度100%，穿过所有圆的中点 */
.steps-base-line,
.steps-active-line {
  position: absolute;
  top: calc(50% - 12.5px); /* 让线条垂直居中在圆心（圆高54px，线高5px） */
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 3px;
  z-index: 1; /* 线条在圆点下方 */
}
.steps-base-line {
  background: #e5e7eb;
}
.steps-active-line {
  background: linear-gradient(90deg, #2ecc71 0%, #27ae60 100%);
  z-index: 2;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(46, 204, 113, 0.1);
}
.steps {
  position: relative;
  width: 100%;
  height: 80px;
  z-index: 3;
}
.step {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px; /* 增大宽度，防止文案溢出换行 */
}
/* 圆点样式，白色背景和加粗外环遮住线条 */
.node-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff; /* 白色背景，遮住线条 */
  border: 6px solid #e5e7eb; /* 外环加粗，遮住线条 */
  color: #b0b0b0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 26px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s;
}
/* 完成和激活时圆点样式 */
.step.completed .node-icon {
  border-color: #2ecc71;
  background: #2ecc71;
  color: #fff;
}
.step.active .node-icon {
  border-color: #409eff;
  background: #409eff;
  color: #fff;
  box-shadow:
    0 4px 16px rgba(64, 158, 255, 0.15),
    0 0 0 0 #409eff;
}
.step.active .node-name {
  color: #409eff;
  font-weight: bold;
}
.step.completed .node-name {
  color: #2ecc71;
}
.step.rejected .node-icon {
  border-color: #e74c3c;
  background: #e74c3c;
  color: #fff;
  box-shadow:
    0 4px 16px rgba(231, 76, 60, 0.15),
    0 0 0 0 #e74c3c;
}
.step.rejected .node-name {
  color: #e74c3c;
  font-weight: bold;
}
.node-name {
  font-size: 18px;
  color: #b0b0b0;
  margin-top: 2px;
  font-weight: 500;
  letter-spacing: 1px;
  white-space: nowrap; /* 强制一行显示，不换行 */
  text-align: center;
}
/* 悬停高亮，蓝色外发光更自然 */
.step:hover .node-icon {
  box-shadow:
    0 4px 16px rgba(64, 158, 255, 0.18),
    0 0 0 6px #eaf4ff;
  filter: none;
}
/* 移动端自适应，圆宽和线位置同步调整 */
@media (max-width: 900px) {
  .steps-wrapper {
    height: 100px;
  }
  .steps {
    height: 100px;
  }
  .step {
    width: 80px;
  }
  .node-icon {
    width: 38px;
    height: 38px;
    font-size: 18px;
    margin-bottom: 4px;
    border-width: 4px; /* 移动端外环变细 */
  }
  .steps-base-line,
  .steps-active-line {
    top: calc(50% - 2.5px); /* 保证线条始终居中 */
  }
}
</style>
